<template>
	<div class="wrap">
		<img src="../../assets/image/图层 274.png" alt="" />购物车
		<table style="border-collapse:collapse;" v-for="item in dataArr">
			<tr class="title"><th><input type="checkbox" class="all"/>{{item.name}}</th><th>{{item.norms}}</th><th>{{item.unit}}</th><th>{{item.count}}</th><th>{{item.total}}</th><th>{{item.operation}}</th></tr>
			<tr class="content" v-for="(k,index) in item.detailArr"><td><input type="checkbox" class="once"/><img :src="k.img" alt="" />{{k.name}}</td><td>一个装</td><td>¥{{k.price}}</td><td><i>{{k.cont}}</i></td><td>¥{{k.sum}}</td><td><span @click="remove(index)">删除</span></td></tr>
		</table>
		<div class="footer"><span>商品总价</span><span>¥{{add}}</span></div>
		<button class="footbtn" @click="tijiao">提交订单</button>
	</div>
</template>

<script>
	export default{
		name:"myshopCar",
		data(){
			return{
				dataArr:[{
					name:"爱果果水果店",
					norms:"规格",
					unit:"单价",
					count:"数量",
					total:"金额",
					operation:"操作",
					detailArr:[]
				}]
			}	
		},
		computed:{
			add:function(){
				var addsum=0;
				for(var i=0;i<this.dataArr[0].detailArr.length;i++){
					console.log(this.dataArr[0].detailArr[i].sum)
					addsum = addsum + this.dataArr[0].detailArr[i].sum
				}
				return addsum;
			}
		},
		created(){
			var _this=this;
			this.axios.get('/api/myshopcar').then(function(data){
					_this.dataArr[0].detailArr = data.data
				})
		},
		methods:{
			remove:function(index){
				var goodsid = this.dataArr[0].detailArr[index].id
				console.log(goodsid)
				var _this=this;
				this.axios.get('/api/remove',{params:{
					id:goodsid
				}}).then(function(data){
					if(data.data.err==0){
						alert("删除失败")
					}else{
						_this.dataArr[0].detailArr.splice(index,1)
						alert("删除成功")
					}
				})
			},
			tijiao:function(){
				window.location.href = "#/oldsite"
			}
		},
		mounted(){
			$(".all").click(function(){
			var allch = this.checked;
			$(".once").each(function(){
				this.checked = allch;
			});
		});
		$(".once").click(function(){
			var length = $(".once:checked").length;
			console.log($(".once:checked"))
			//未选中的长度
			var len = $(".once").length;
			if(length == len) {
				$(".all").get(0).checked = true;
			} else {
				$(".all").get(0).checked = false;
			}
		})
		}
	}
</script>

<style scoped>
	.wrap{
		width: 1280px;
		margin: 20px auto;
	}
	table{
	border: 1px solid  rgb(242,242,242);
	width: 1280px;
	outline: none;
	margin: 20px 0;
	}
	.title{
		background-color: rgb(242,242,242);
		color: rgb(123,123,123);
		line-height: 46px;
		font-weight: 100;
	}
	.title input{
		margin:0 20px;
	}
	th{
		font-size: 16px;
		text-align: left;
	}
	.content{
		line-height: 120px;
		border-bottom: 1px solid  rgb(242,242,242);
	}
	.content img{
		vertical-align: middle;
		width: 100px;
		height: 100px;
		margin-right:10px ;
	}
	td{
		font-size: 15px;	
		text-align: left;
		color: rgb(123,123,123);
	}
	td input{
		margin: 0 20px;
	}
	td i{
			display: inline-block;
			text-align: center;
			width: 20px;
			line-height: 21px;
			font-style: normal;
	}
	.add,.sub{
			font-style: normal;
			padding: 0 4px;
			background-color: #f2f2f2;
			color: lightgray;
			border: 1px solid lightgray;
			cursor: pointer;
		}
		.footer{
			line-height: 70px;
			font-size: 20px;
			position: relative;
			left: 1113px;
		}
		.footer>span:nth-child(2){
			font-size: 23px;
			color: red;
		}
		.footbtn{
			width: 200px;
			height: 36px;
			font-size: 20px;
			color: white;
			background-color: rgb(247,131,39);
			position: relative;
			left: 1113px;
		}
</style>